<template>
  <div class="inputeArea">
    <div class="module">
        <h3 class="title">组件定义</h3>
        <h5>组件名称：</h5>
        <input v-model="moduleName" class="moduleName" type="text" placeholder="请输入组件名称">
        <h5>组件类别：</h5>
        <select v-model="category">
          <option v-for="item in componentCategory" :value="item.value" :key="item.name">{{item.name}}</option>
        </select>
        <div class="btn">
          <button class="add" @click="addComponents">添加组件</button>
        </div>
    </div>
    <div class="definition">
        <h3 class="title">相互作用定义</h3>
        <h5>源组件：</h5>
         <select v-model="sourceComponent">
          <option v-for="item in data" :value="item.name" :key="item">{{item.name}}</option>
        </select>
        <h5>目标组件：</h5>
         <select name="" id="" v-model="target">
          <option v-for="item in data" :value="item.name" :key="item">{{item.name}}</option>
        </select>
        <h5>作用类型：</h5>
         <select name="" id="" v-model="type">
          <option v-for="item in typeList" :value="item.name" :key="item">{{item.name}}</option>
        </select>
        <h5>作用名称:</h5>
        <input class="name" v-model="typeName" type="text" placeholder="请输入相互作用名称">
        <div class="btn">
          <button @click="addEffect" class="addEffect">添加相互作用</button>
        </div>
    </div>
  </div>
  <div class="main" ref="box">fsd</div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted,nextTick } from 'vue';
const box = ref(null)
let myChart = null;
// echarts数据
let option = ref(null);

// 组件名称
const moduleName = ref(null)

// 组件类别  
const componentCategory = ref([
  {
    name: '组件', // 正方形
    value:'rect'
  },
  {
    name: '超系统组件', // 六边形
     value:'path://M20,0 L10,17 L-10,17 L-20,0 L-10,-17 L10,-17 Z'
  },
  {
    name: '目标', // 圆角矩形
     value:'roundRect'
  } 
]);

const category = ref("组件")

// 选中的源组件
const sourceComponent = ref(null)
// 选中的目标组件
const target = ref(null)
// 作用类型
const type = ref(null)
// 作用类型列表
const typeList = ref([
  {name:"有害作用"},
  {name:"有用作用（正常）"}, // 实线箭头
  {name:"有用作用（不足）"}, // 
  {name:"有用作用（过量）"},
])

// 类型名称
const typeName = ref(null)

// 数据源
let data = ref([
  
])

// 指向线条
let links = ref([
       
])

onMounted(async  () => {
  myChart = echarts.init(box.value);
  option = {
  title: {
    text:"功能模型图"
  },
  tooltip: {},
  animationDurationUpdate: 1500,
  animationEasingUpdate: 'quinticInOut',
  series: [
  
    {
      type: 'graph',
      layout: 'none',
      symbolSize: 50,
      smooth: true,
      roam: false,
      symbol: 'M30,0 L60,15 L60,45 L30,60 L0,45 L0,15 Z',
      label: {
        show: true
      },
      edgeSymbol: ['circle', 'arrow'],
      edgeSymbolSize: [4, 10],
      edgeLabel: {
        fontSize: 20
      },
      // 数据源
      data:data.value,
      // 指向线条
     links :links.value,
       animationProperty: ['opacity', 'position'],
      // 指向线条样式
      lineStyle: {
        opacity: 0.9,
        width: 2,
        // 指向线条弧度
        curveness: 0.3
      }
    }
  ]
};
  await nextTick();
  myChart.setOption(option);
  myChart.resize();
})

// 添加组件
const addComponents = () => {
  // 非空校验
  if(moduleName.value == null) {
    return alert("请输入组件名称")
  }
  // 重复校验
  const exists = data.value.some(node => node.name === moduleName.value);
  if (exists) {
    alert('该组件名称已存在');
    return;
  }

  console.log(category.value)

  // 计算新节点位置
  const centerX = 200;
  const centerY = 200;
  const radius = 200;
  const angle = (data.value.length * Math.PI * 2) / 6; // 8个节点一圈
  
  const newNode = {
    name: moduleName.value,
    symbol: category.value,
    symbolSize: 50,
    x: centerX + radius * Math.cos(angle),
    y: centerY + radius * Math.sin(angle),
    draggable: true
  };
  
  data.value.push(newNode)
  myChart.setOption({
    series: [{
      data: data.value
    }]
  });


  moduleName.value = ''
  category.value = ''
}

// 添加相互作用组件
const addEffect = () => {
  if(sourceComponent.value == null) {
    return alert("源组件不能为空");
  }

  if(target.value == null) {
    return alert("目标组件不能为空");
  }

  if(typeName.value == null) {
    return alert("作用名称不能为空");
  }

  if(sourceComponent.value == target.value) {
    return alert("源组件和目标组件不能一致");
  }

  links.value.push({
    source: sourceComponent.value,
    target: target.value,
    lineStyle: {
      type: 'solid',
      color: '#666'
    },
    label: {
      show: true,
      formatter: typeName.value,
      fontSize: 12
    }
  })

  myChart.setOption({
    series: [{
      links: links.value
    }]
  });

  sourceComponent.value = ''
  target.value = ''
  typeName.value = ''
  type.value = ''
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
input,select {
  width: 240px;
  height: 30px;
  border: 1px solid #CCC;
  border-radius: 4px;
  margin: 5px 0;
  padding: 6px;
  outline: none;
}
.inputeArea {
  width: 1000px;
  height: 380px;
  display: flex;
  justify-content: space-between;
}
.module {
  width: 48%;
  border: 2px solid #ccc;
  padding: 30px;
}
.definition {
  width: 48%;
  border: 2px solid #ccc;
  padding: 30px;

}
.title {
  margin-bottom: 10px;
}
.add,.addEffect {
  padding: 10px 20px;
  margin-top: 10px;
  font-size: 18px;
  color: #FFF;
  border: none;
  background-color: #4caf50;
  border-radius: 4px;
}
.main {
  width: 500px;
  height: 380px;
  border: 2px solid #CCC;
  margin: 25px;
}
</style>
